<template>
  <div class="demo-main" ref="demoMain">
    <canvas id="mainCanvas" ref="mainCanvas"></canvas>
    <div class="opare-panel">
      <div class="item">
        <span class="name">材质:</span>
        <el-select v-model="selectMaterial" placeholder="" @change="rendererHandle">
          <el-option v-for="item in materialList" 
            :key="item.value"
            :label="item.label"
            :value="item.type"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <span class="name">物品：</span>
        <el-select v-model="selectGeometry" placeholder="" @change="rendererHandle">
          <el-option v-for="item in geometryList" 
            :key="item.value"
            :label="item.label"
            :value="item.type"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <span class="name">是否空心：</span>
        <el-checkbox v-model="isWireframe"  @change="rendererHandle"></el-checkbox>
      </div>
      <div class="item">
        <span class="name">物体颜色：</span>
        <el-input v-model="color" type="color" @change="changeColorHandle"></el-input>
      </div>
    </div>
  </div>
</template>
<script>
import * as THREE from 'three'
export default {
  data() {
    return {
      id: null,
      renderer: null,
      camera: null,
      scene: null,
      geometry: null,
      material: null,
      cube: null,
      isWireframe: false, //是否是实心
      selectGeometry: '0',
      selectMaterial: '0',
      color: '#a82424',
      materialList: [{
        type: '0',
        label: '基础网格材质',
        name: 'MeshBasicMaterial'
      }, {
        type: '1',
        label: '深度网格材质',
        name: 'MeshDepthMaterial'
      }, {
        type: '2',
        label: 'Lambert网格材质',
        name: 'MeshLambertMaterial'
      }, {
        type: '3',
        label: 'MeshMatcapMaterial',
        name: 'MeshMatcapMaterial'
      }, {
        type: '4',
        label: '法线网格材质',
        name: 'MeshNormalMaterial'
      }, {
        type: '5',
        label: 'Phong网格材质',
        name: 'MeshPhongMaterial'
      }, {
        type: '6',
        label: '物理网格材质',
        name: 'MeshPhysicalMaterial'
      }, {
        type: '7',
        label: '标准网格材质',
        name: 'MeshStandardMaterial'
      }, {
        type: '8',
        label: 'MeshToonMaterial',
        name: 'MeshToonMaterial'
      }],
      geometryList: [{
        type: '0',
        label: '四方体',
        name: 'BoxGeometry',
        params: [1, 2, 3, 2, 2, 3]
      }, {
        type: '1',
        label: '平面',
        name: 'PlaneGeometry',
        params: [1, 2]
      }, {
        type: '2',
        label: '球体',
        name: 'SphereGeometry',
        params: [1, 8, 6]
      }, {
        type: '3',
        label: '圆形',
        name: 'CircleGeometry',
        params: [10, 18, Math.PI / 3, Math.PI / 3 * 4]
      }, {
        type: '4',
        label: '圆柱',
        name: 'CylinderGeometry',
        params: [1, 1, 2, 18, 2, true]
      }, {
        type: '5',
        label: '三角锥',
        name: 'TetrahedronGeometry',
        params: [1]
      }, {
        type: '6',
        label: '正八面体',
        name: 'OctahedronGeometry',
        params: [1]
      }, {
        type: '7',
        label: '圆环缓冲几何体',
        name: 'TorusGeometry',
        params: [1, 0.3, 12, 8]
      }, {
        type: '8',
        label: '圆环结',
        name: 'TorusKnotGeometry',
        params: [0.8, 0.2, 32, 8]
      }]
    }
  },
  mounted() {
    this.zoom()
    window.addEventListener('resize', this.zoom, false) 
    this.rendererHandle()
  },
  methods: {
    zoom() {
      this.$refs.mainCanvas.width = this.$refs.demoMain.clientWidth;
      this.$refs.mainCanvas.height = this.$refs.demoMain.clientHeight;
    },
    rendererHandle(){
      const curGeometryItem = this.geometryList[this.selectGeometry]
      const curMaterialItem = this.materialList[this.selectMaterial]
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.$refs.mainCanvas
      })
      this.renderer.setClearColor('black')
      // 场景
      this.scene = new THREE.Scene()
      // 相机
      this.camera = new THREE.OrthographicCamera(-3, 3, 4, -4, 5, 100)
      this.camera.position.set(4, 3, 5)
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      //添加到场景中
      this.scene.add(this.camera) 

      // 光线
      const light = new THREE.PointLight('yellow', 1, 100)
      light.position.set(4,3,5)
      this.scene.add(light)
      
      this.geometry = new THREE[curGeometryItem.name](...curGeometryItem.params) //圆环结
      this.material = new THREE[curMaterialItem.name]({ 
          color: this.color, 
          wireframe: this.isWireframe  //是否为实心
      });
      this.cube= new THREE.Mesh(this.geometry, this.material)
      this.scene.add(this.cube)


      var axisHelper = new THREE.AxesHelper(250);
      this.scene.add(axisHelper);
      if(this.id){
        cancelAnimationFrame(this.id)
      }
      this.id = requestAnimationFrame(this.draw)
      // 渲染到页面上
      this.renderer.render(this.scene, this.camera)
    },
    draw() {
      // curStat.begin()
      this.cube.rotation.y = (this.cube.rotation.y + 0.01) % (Math.PI * 2)
      this.renderer.render(this.scene, this.camera)
      // curStat.end();
      this.id = requestAnimationFrame(this.draw)
    },
    changeColorHandle(value){
      this.color = value
      this.rendererHandle()
    }
  }
};
</script>
<style lang="less" scoped>
  .demo-main{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .opare-panel{
    position: absolute;
    right: 0px;
    top: 0px;
    // background: #ffffff;
    color: white;
    font-size: 14px;
    padding: 10px;
    .item{
      margin-top: 10px;
      text-align: left;
      display: flex;
      align-items: center;
    }
    .name{
      width: 100px;
    }
  }
  ::v-deep .el-select, .el-input{
      flex: 1
  }
</style>
